<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>新建客服</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/cusmanage/css/formSelects-v4.css">
    <link rel="stylesheet" href="/fission/css/iconfont.css">
	<style type="text/css">
		body{
			background: #e9e9e9; 
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
			justify-content: space-between;
		}
		.public_title_container a{
			fill: #999;
		}
		/*公共表单部分*/
		.public_form_container{
			padding: 20px 20px 40px 20px;
		}
		.public_form_content{
			padding: 24px 40px 24px 0;
			background: #fff;
			border: 1px solid #e9e9e9;
			margin-bottom: 8px;
		}
		.public_form_List{
			margin-bottom: 10px;
		}
		.public_form_List:last-child{
			margin-bottom: 0px;
		}
		.public_formTitle_container lable{
			font-size: 13px;
			font-weight: bold;
		}
		/*新加的二维码*/
		.uploadQrcode_container{
			display: flex;
			align-items: center;
		}
		.uploadQrcode_container button{
			margin-left: 15px;
		}
		.uploadQrcode_container span{
			color: #999;
			font-size: 13px;
		}
		.uploadQrcode_content{
			position: relative;
			width: 150px;
			height: 150px;
			overflow: hidden;
		}
		.qrcodeImg_h{
			width: 150px;
			height: 150px;
		}
		.qrcodeHead_h{
			width: 35px;
			height: 35px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.service-card {
		  padding: 0 7px;
		  color: rgba(0,0,0,.65);
		  line-height: 28px;
		  font-size: 13px;
		  display: inline-block;
		  margin: 0 8px 0 5px;
		  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
		  white-space: nowrap;
		  background: #fafafa;
		  border: 1px solid #e9e9e9;
		  border-radius: 4px;
		  position: relative;
		}
		.service-card i {
		  font-size: 14px;
		  display: inline-block;
		  color: #7da3d1;
		  margin-right: 2px;
		}
		.service-card .close {
		  position: absolute;
		  top: -13px;
		  right: -8px;
		  opacity: .6;
		  cursor: pointer;
		}
		.service-card .close:hover {
		  opacity: 1;
		}
	</style>
</head>
<body>
<form class="layui-form" id="form1">
	

	<div class="public_container">
		<!-- /*公共头部带搜索*/ -->
		<div class="public_content">
			<div class="public_title_container">
				<p>新建客服账号</p>
				<a href="javascript:history.back(-1)">
					<svg t="1599462684269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8055" width="20" height="20"><path d="M501.2992 273.408l1.024-156.16L184.65792 379.904l314.29632 266.1376 0.95232-149.2992c313.86624 42.5984 178.29888 231.3216-0.5632 410.2144 619.5712-404.3776 251.01312-590.6432 1.95584-633.5488z" p-id="8056"></path></svg>
				</a>
			</div>
		</div>
		<!-- 公共表单部分 -->
		<div class="public_form_container">
			<div class="public_form_content">
				<div class="public_form_List">
					<div class="public_formTitle_container">
						<lable class="layui-form-label">客服账号：</lable>
					</div>
					<div class="public_formOther_container">
						<div class="layui-input-block">
							<input type="text" id="name" required  lay-verify="required" placeholder="请输入客服账号,不多于16个字符" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="public_form_List">
					<div class="public_formTitle_container">
						<lable class="layui-form-label">头像上传：</lable>
					</div>
					<div class="public_formOther_container">
						<div class="layui-input-block uploadQrcode_container">
							<div class="uploadQrcode_content" style="display: none;">
								<img class="qrcodeImg_h" id="demo1" >
								<input type="hidden" id="imghiden">
                                <input type="file" hidden id="filkes"/>
							</div>
						  	<button type="button" class="layui-btn" onclick="falses()" id="test1">上传图片</button>
						</div>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" type="button" onclick="add()">立即提交</button>
				</div>
			</div>
		</div>
		<!-- 公共表单部分 end-->
	</div>
</form>
<script src="/cdn/jquery.js"></script>
<script src="/layui/layui.js"></script>
<script src="/cusmanage/js/formSelects-v4.min.js"></script>
<script src="/js/ajax.js"></script>
<script>
	 function falses() {
        $("#filkes").trigger("click");
        openuploadstow();
    }

    function openuploadstow() {
        $("#filkes").change(function () {
            var formdata = new FormData();
            formdata.append('file', $("#filkes")[0].files[0]); //获取file信息
            console.log(formdata);
            $.ajax({
                url: "add_file.html",
                type: 'post',
                data: formdata,
                cache: false,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (e) {
                    if (e.status == "success") {
                		layer.msg(e.msg);
                        var data = e.data.filePath;
                        $('#demo1').attr('src', data);
                        $('.uploadQrcode_content').show();
                        $("#imghiden").val(data);
                    } else {
                        layer.msg(e.msg, '');
                    }
                }
            });
        });
    }
	layui.use('layer', function(){
	  var layer = layui.layer;
	}); 
	
    function add(){
		var name = $("#name").val();
		var img = $("#imghiden").val();
		if(!name){
			alert("请输入客服名称");
			return false;
		}
		if(!img){
			alert("请选择客服头像");
			return false;
		}
		myAjaxPost(false, true, '',{ name:name,img,img}, function (resp) {
			if (resp.status == 'success') {
				tusi(resp.msg);
				setTimeout(function(){ 
					window.history.go(-1);
				},2000);
			}else{
				tusi(resp.msg);
			}
		})
    }
</script>
</body>
</html>